<template>
  <div>
    <!-- topbar -->
    <section
      style="z-index: 999"
      class="position-fixed left-0 top-0 right-0 bg-black d-flex ai-center jc-center text-white fs-md py-2 px-3"
    >
      <img src="~@/assets/logo.png" width="30" alt />
      <div class="flex-1">
        <span class="fs-lg mx-2">王者荣耀</span>
        <span class="ml-2">攻略战</span>
      </div>
      <div>
        更多英雄
        <i class="fs-xl">&gt;</i>
      </div>
    </section>

    <!-- 封面cover -->
    <section class="cover position-relative" v-if="coverInfo">
      <img
        class="position-absolute w-100 h-100"
        :src="coverInfo.banner"
      />
      <div
        class="p-3 attributes w-100 h-100 d-flex flex-column jc-end text-white position-relative"
      >
        <div class="fs-sm">{{coverInfo.title}}</div>
        <div class="fs-weight fs-xl">{{coverInfo.name}}</div>
        <div class="fs-sm">{{coverInfo.jobs}}</div>
        <div class="d-flex mt-1">
          <div class="flex-1 d-flex">
            <div class="score-item fs-sm mr-2 d-flex ai-center">
              <span class="mr-1">难度</span>
              <span class="score-item-badge d-flex ai-center jc-center score-item-badge--warning">{{coverInfo.scores.difficult}}</span>
            </div>
            <div class="score-item fs-sm mr-2 d-flex ai-center">
              <span class="mr-1">技能</span>
              <span class="score-item-badge d-flex ai-center jc-center score-item-badge--primary">{{coverInfo.scores.skills}}</span>
            </div>
            <div class="score-item fs-sm mr-2 d-flex ai-center">
              <span class="mr-1">攻击</span>
              <span class="score-item-badge d-flex ai-center jc-center score-item-badge--danger">{{coverInfo.scores.attack}}</span>
            </div>
            <div class="score-item fs-sm mr-2 d-flex ai-center">
              <span class="mr-1">生存</span>
              <span class="score-item-badge d-flex ai-center jc-center score-item-badge--info">{{coverInfo.scores.survive}}</span>
            </div>
          </div>
          <div class="fs-sm text-grey-2">
            皮肤：6
            <i class="fs-lg">&gt;</i>
          </div>
        </div>
      </div>
    </section>

    <!-- scroll-view -->
    <section class="bg-white">
      <!-- tabbars -->
      <div class="px-3 tabbar d-flex py-3 border-bottom">
        <div
          @click="()=> {$refs['scroll-view'].$swiper.slideTo(tabIndex)}"
          v-for="(tab, tabIndex) in tabbars"
          class="tabbar-item flex-1 text-center fs-md"
          :key="tabIndex"
          :class="{'active': tabIndex === swiperActiveIndex}"
        >
          <span>{{tab.name}}</span>
        </div>
      </div>

      <swiper
        ref="scroll-view"
        @slide-change="()=> swiperActiveIndex = $refs['scroll-view'].$swiper.realIndex"
      >
        <swiper-slide>
          <!-- 按钮 -->
          <div class="px-3 d-flex py-2 jc-between">
            <div
              class="border boder-light-secondary icon-button d-flex ai-center jc-center flex-1 py-3 mr-2"
            >
              <i class="iconfont icon-card-hero text-primary mr-2"></i>
              英雄视频简介
            </div>
            <div
              class="border boder-light-secondary icon-button d-flex ai-center jc-center flex-1 py-3"
            >
              <i class="iconfont icon-card-hero text-primary mr-2"></i>
              一图识英雄
            </div>
          </div>

          <!-- 点选技能 -->
          <div class="border-bottom px-3 selected-skills" 
              v-if="skills.list.length > 0"
          >
            <div class="selected-skills__header py-4 jc-around d-flex">
              <div 
              @click="()=> {skills.selected = skiIndex}"
              v-for="(ski, skiIndex) in skills.list"
              :class="{'active': skills.selected === skiIndex}"
              :key="skiIndex"
              class="icon-skill">
                <img
                  width="65"
                  :src="ski.icon"
                />
              </div>
            </div>
            <div class="selected-skills__body mb-2">
              <div class="d-flex mb-4">
                <span class="text-dark fs-lg fs-weight mr-3">{{skills.list[skills.selected].name}}</span>
                <div class="fs-sm text-grey">(冷却值：{{skills.list[skills.selected].delay}} 消耗：{{skills.list[skills.selected].cost}})</div>
              </div>
              <div
                class="fs-md line-md text-dark-1"
              >
                {{skills.list[skills.selected].description}}
              </div>
            </div>
          </div>

          <!-- 全局分割线 -->
          <divider />

          <!-- 加点建议 -->
          <wu-card
            title="加点建议"
            leftIcon="icon-menu1"
            :headBorderBottom="false"
            :showRightIcon="false"
          >
            <div class="d-flex ai-center jc-around">
              <div
                v-for="(item1, index1) in suggests"
                :key="index1"
                class="d-flex flex-column ai-center text-dark-1"
              >
                <span class="fs-lg mb-3">{{item1.title}}</span>
                <div class="d-flex jc-center">
                  <div
                    class="mr-2"
                    v-for="(item2, index2) in item1.skills"
                    :key="index2"
                    :class="{'m-0': item1.skills.length - 1 === index2}"
                  >
                    <img class="d-block" width="65" :src="item2.icon" />
                    <div class="my-2 text-center fs-sm">{{item2.name}}</div>
                  </div>
                </div>
              </div>
            </div>
          </wu-card>

          <!-- 出装推荐 -->
          <wu-card
            class="border-bottom"
            title="出装推荐"
            leftIcon="icon-menu1"
            :headBorderBottom="false"
            :showRightIcon="false"
          >
            <div class="text-dark-1 mb-3">
              <div class="fs-lg mb-2">顺风出装</div>
              <div class="border-bottom d-flex ai-center jc-center">
                <div
                  v-for="(item,index) in items1"
                  :key="index"
                  class="d-flex flex-column ai-center flex-1"
                >
                  <img width="46" :src="item.icon" class="border-radius" />
                  <span class="fs-sm mt-2 mb-1">{{item.name}}</span>
                </div>
              </div>
            </div>
            <div class="text-dark-1">
              <div class="fs-lg mb-2">逆风出装</div>
              <div class="d-flex ai-center jc-center">
                <div
                  v-for="(item,index) in items2"
                  :key="index"
                  class="d-flex flex-column ai-center flex-1"
                >
                  <img width="46" :src="item.icon" class="border-radius" />
                  <span class="fs-sm mt-2 mb-1">{{item.name}}</span>
                </div>
              </div>
            </div>
          </wu-card>

          <!-- 全局分割线 -->
          <divider />

          <!-- 铭文推荐 -->
          <wu-card
            class="border-bottom"
            title="铭文推荐"
            leftIcon="icon-menu1"
            :headBorderBottom="false"
            :showRightIcon="false"
          >
            <div class="d-flex text-dark-1 fs-sm">
              <div
                v-for="(inscriItem, inscriIndex) in (inscriptions)"
                :key="inscriIndex"
                class="d-flex flex-column flex-1 px-3"
              >
                <img width="34" :src="inscriItem.icon" class="a-self-start" />
                <div class="a-self-end line">
                  <div class="fs-lg">{{inscriItem.name}}</div>
                  <div class="d-flex flex-column">
                    <span v-for="attr in inscriItem.attrs" :key="attr">{{attr}}</span>
                  </div>
                </div>
              </div>
            </div>
          </wu-card>

          <!-- 全局分割线 -->
          <divider />

          <!-- 使用技巧 -->
          <wu-card
            class="border-bottom"
            leftIcon="icon-menu1"
            title="使用技巧"
            :headBorderBottom="false"
            :showRightIcon="false"
          >
            <div
              class="text-dark-1 line-md"
            >{{usageTips}}</div>
          </wu-card>

          <!-- 全局分割线 -->
          <divider />

          <!-- 对抗技巧 -->
          <wu-card
            class="border-bottom"
            leftIcon="icon-menu1"
            title="对抗技巧"
            :headBorderBottom="false"
            :showRightIcon="false"
          >
            <div
              class="text-dark-1 line-md"
            >{{battleTips}}</div>
          </wu-card>

          <!-- 团战思路 -->
          <wu-card
            class="border-bottom"
            leftIcon="icon-menu1"
            title="团战思路"
            :headBorderBottom="false"
            :showRightIcon="false"
          >
            <div
              class="text-dark-1 line-md"
            >{{teamTips}}</div>
          </wu-card>

          <!-- 英雄关系 -->
          <wu-card
            class="border-bottom"
            leftIcon="icon-menu1"
            title="英雄关系"
            :headBorderBottom="false"
            :showRightIcon="false"
          >
            <div class="text-dark-1">
              <div 
             
              class="border-bottom mb-1">
                <div class="mb-3 fs-lg">最佳搭档</div>
                <div 
                 v-for="(partner, partnerIndex) in partners"
              :key="partnerIndex"
                class="d-flex ai-center jc-center mb-3">
                  <img
                    class="flex-shrink"
                    width="48"
                    :src="partner.hero.avatar"
                    alt
                  />
                  <div class="flex-1 line-md ml-2 fs-md">
                      {{partner.description}}
                  </div>
                </div>
              </div>
            </div>
          </wu-card>
        </swiper-slide>
        <swiper-slide>2</swiper-slide>
      </swiper>
    </section>
  </div>
</template>

<script>
import wuButton from "@/components/common/WuButton";
import wuCard from "@/components/wu-card";
export default {
  props: {
    id: {
      type: String,
      required: true
    }
  },
  components: {
    wuButton,
    wuCard
  },
  data() {
    return {
      swiperActiveIndex: 0,
      coverInfo: null,
      tabbars: [{ name: "英雄初识" }, { name: "进阶攻略" }],
      skills: {
          selected: 0,
          list: []
      },
      suggests: [
        {
          title: "主升",
          skills: [
            {
              name: "落日余晖",
              icon:
                "https://game.gtimg.cn/images/yxzj/img201606/heroimg/169/16920.png"
            }
          ]
        },
        {
          title: "副升",
          skills: [
            {
              name: "多重箭矢",
              icon:
                "https://game.gtimg.cn/images/yxzj/img201606/heroimg/169/16920.png"
            }
          ]
        },
        {
          title: "召唤师技能",
          skills: [
            {
              name: "闪现",
              icon:
                "https://game.gtimg.cn/images/yxzj/img201606/heroimg/169/16920.png"
            },
            {
              name: "治疗术",
              icon:
                "https://game.gtimg.cn/images/yxzj/img201606/heroimg/169/16920.png"
            }
          ]
        }
      ],
      items1: [],
      items2: [],
      inscriptions: [
        {
          name: "红月",
          icon: "https://game.gtimg.cn/images/yxzj/img201606/mingwen/1520.png",
          attrs: ["攻速加成+1.6%", "暴击率+0.5%"]
        },
        {
          name: "红月",
          icon: "https://game.gtimg.cn/images/yxzj/img201606/mingwen/1520.png",
          attrs: ["攻速加成+1.6%", "暴击率+0.5%"]
        },
        {
          name: "红月",
          icon: "https://game.gtimg.cn/images/yxzj/img201606/mingwen/1520.png",
          attrs: ["攻速加成+1.6%", "暴击率+0.5%"]
        }
      ],
      usageTips: '',
      battleTips: '',
      teamTips: '',
      partners: []
    };
  },
  created() {
      this.fetchHeroById()
  },
  methods: {
      async fetchHeroById(){
          const data = await this.$http.get(`heroes/${this.id}`)
          let res = data.data
          this.coverInfo = {
              banner: res.banner,
              title: res.title,
              name: res.name,
              jobs: res.jobs,
              scores: res.scores || {}
          }
          this.skills.list = res.skills;
          this.items1 = res.items1;
          this.items2 = res.items2;
          this.usageTips = res.usageTips;
          this.battleTips = res.battleTips;
          this.teamTips = res.teamTips;
          this.partners = res.partners
      }
  }
};
</script>

<style lang="scss">
@import "~@/assets/scss/variables.scss";
.cover {
  height: 14.6923rem;
  margin-top: 3.3077rem;
  .attributes {
    z-index: 2;
    line-height: 1.4;
    background-image: linear-gradient(-40deg, #000, transparent, #000);
  }
  .score-item {
    &-badge {
      border-bottom: 1px solid #ffffff;
      border-radius: 50%;
      font-size: 8px;
      transform: scale(0.85);
      line-height: 1;
      color: rgba(255, 255, 255, 0.8);
      min-width: 14px;
      &--warning {
        background-color: rgb(127, 82, 0);
      }
      &--primary {
        background-color: rgb(30, 53, 149);
      }
      &--danger {
        background-color: rgb(120, 25, 21);
      }
      &--info {
        background-color: rgb(50, 50, 43);
      }
    }
  }
}
.tabbar {
  &-item {
    &.active {
      span {
        border-bottom: 0.1538rem solid map-get($colors, "primary");
        color: map-get($colors, "primary");
      }
    }
  }
}
.icon-button {
  &:focus,
  &:active {
    background-color: #eee;
  }
  border-radius: 0.2308rem;
  background-color: rgb(252, 252, 252);
  i {
    font-size: 1.3846rem;
  }
}
.selected-skills {
  &__header {
    .icon-skill {
      border-radius: 100%;
      img {
        display: block;
      }
        border: 0.1538rem solid transparent;
      &.active {
        border-color: map-get($colors, "primary");
      }
    }
  }
}
</style>